<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      table {
        width: 450px;
        border-collapse: collapse;
      }
      table,
      tr,
      th,
      td {
        border: 1px solid #000;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>科目</th>
          <th>成绩</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <!-- <tr>
          <td>张三</td>
          <td>语文</td>
          <td>90</td>
          <td>删除</td>
        </tr> -->
      </tbody>
    </table>
    <script>
      let obj = [
        {
          name: "张三",
          subject: "语文",
          score: 90,
        },
        {
          name: "张乐乐",
          subject: "语文",
          score: 90,
        },
         {
          name: "张乐乐",
          subject: "语文",
          score: 90,
        },
      ];
      let tbody = document.querySelector("tbody");
      for (let i = 0; i < obj.length; i++) {
        //创建tr
        let tr = document.createElement("tr");
        tbody.appendChild(tr);
        //创建td
          for (let key in obj[i]) {
              console.log(obj[i][key]);
            let td = document.createElement("td");
            td.innerHTML = obj[i][key];
            tr.appendChild(td);
          }
        //创建删除按钮
          let btn = document.createElement("button");
          btn.innerHTML = "删除";
          tr.appendChild(btn);
          btn.onclick = function () {
            tbody.removeChild(tr);
          };

      }
    </script>
  </body>
</html>
